<template>
<div class="cinemaList">
  <div class="cinema" v-for="(cinema,index) in cinemaList" :key="index">
    <div class="cinemaInfo">
      <div class="cinemaName">
        {{cinema.cinemaName}}
      </div>
      <div class="cinemaAddress">
        地址：{{cinema.cinemaAddress}}
      </div>
      <div class="cinemaType">
        {{cinema.cinemaType}}
      </div>
    </div>
    <div class="cinemaTicket myFlex-x">
<!--      直接将价格和折扣做乘法，结果做四舍五入保留两位小数-->
<!--      <span classcinemaPrice>{{(movie.price*cinema.discount).toFixed(2)}}</span>-->
      <span classcinemaPrice>￥{{getNewPrice(movie.price,cinema.discount)}}</span>
      <input class="cinemaBuyTicket" type=button value="选座购票"/>
    </div>
  </div>
</div>
  <div class="cinemaPage myFlex-x">
    <el-pagination
        background
        :page-size=pageSize
        layout="prev, pager, next"
        :total="total"
        @prev-click="prev"
        @next-click="next"
        @current-change="handleCurrentChange"
    />

  </div>
</template>

<script setup lang="ts">
import {router} from "@/router/router.ts"
import {ref,onMounted} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import getNewPrice from "@/utils/getNewPrice";
//从请求地址中获取传来的参数
const id=router.currentRoute.value.query.movieId;
//电影对象信息
let movie = ref({ price: 30 });
// let movie=ref();
//分页的配置项
let pageCurrent=ref(1);//当前页码
let pageSize=ref(5);//一页显示多少条数据
let total=ref(0);//分页数据的总条数
let cinemaList=ref();//获取到的影院的分页数据
let pageTotal=ref(0);//总页数

//页面初次加载时，访问后端获取分页数据
onMounted(() => {
  //根据电影id获取电影数据
  request.get("/getMovieById",{params:{movieId:id}})
  .then(response=>{
    movie.value=response.data;
  })
  .catch(error=>{
    ElMessage.error(error)
  })
  getPageData(pageCurrent.value,pageSize.value)
})

//上一页
function prev()
{
  if(pageCurrent.value==total.value) return
  pageCurrent.value--;
  getPageData(pageCurrent.value,pageSize.value)
}
//下一页
function next()
{
  if(pageCurrent.value==total.value) return
  pageCurrent.value++;
  getPageData(pageCurrent.value,pageSize.value)
}
//current-page 改变时触发
function handleCurrentChange(val)
{
  pageCurrent.value=val;
  getPageData(pageCurrent.value,pageSize.value)
}
//发送请求访问后端获取分页数据
function getPageData(current,size){
  request.get("/getCinemaList", {
    params: {
      pageCurrent: pageCurrent.value,
      pageSize: pageSize.value
    }
  }) // 修正了这里的括号位置
      .then(response => {
        // 从响应中获取到分页数据
        console.log(response.data)
        total.value = response.data.total
        cinemaList.value = response.data.records;
        pageTotal.value=response.data.pages;
      })
      .catch(error => {
        ElMessage.error(error.message || '请求失败')
      })
}
</script>

<style scoped>
@import "@/assets/css/cinemaList.css";
</style>